<template>
	<view class="back-top" v-show="isShow" @click="toTop">
			<image class="back-top-img"
				src="https://cdn-cos-ke.myoed.com/ke_proj/mobilev2/m-core/03de0936a7aafee76646b8b2d5fa5b4f.png" mode=""></image>
	</view>
</template>

<script setup lang="ts">
	import {ref} from 'vue'
	const isShow = ref(false)
	import { onLoad,onPageScroll } from '@dcloudio/uni-app';
	
	
	onLoad(()=>{
		uni.$on('pageScroll',(scrollTop)=>{
			//当滚动的距离大于300是 就要显示向上的小图标
			if(scrollTop>300){
				isShow.value=true
			}else{
				isShow.value=false
			}
		})
	})
	const toTop=()=>{
		//这里将高度直接设置为0 也就是回到顶部
		uni.pageScrollTo({
			scrollTop:0
		})
	}
</script>

<style lang="less">
	
	.back-top {
			width: 100upx;
			height: 100upx;
			position: fixed;
			right: 50upx;
			bottom: 20upx;
			.back-top-img {
				width: 100%;
				height: 100%;
			}
		}
</style>